const path = require('path')
//目标：插件的使用
// 1.导入插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  //模式:取值范围只有两个单词：production /development
  //webpack 把打包分成了两种模式，一种是线上生产环境的模式，另一种是开发环境的模式
  //production:生产模式，会对代码进行压缩混淆
  //development:开发模式，不会对代码进行压缩混淆，速度非常快
  //只要修改了 webpack的配置文件，都需要重新启动开发服务器
  //devServer 修改代码后不会刷新浏览器就直接更新页面了，代码热更新，只打包修改了的部分，以打补丁的形式替换到浏览器上
  //HMR:Hot Moudle Replacement 热模块替换，简称热更新

  mode: 'production',
  devServer: {
    port: 3000, //端口号
    open: true  //自动打开浏览器
  },
  entry: './src/main.js', // 入口，可以是相对路径
  output: {  //出口，必须是绝对路径
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  //2.配置插件
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ],
  //配置loader
  module: {
    //规则
    rules: [
      //一个对象表示一条匹配规则
      {
        //正则匹配文件名 i是修饰符 ignore忽略大小写
        // . 在正则中有什么特殊含义？匹配非回车换行的字符
        //我们不希望他有特殊含义，所以要转意
        test: /\.css$/i,
        //匹配到后使用 loader
        use: ['style-loader', 'css-loader']
      },
      //配置less
      {
        //正则匹配文件名 i是修饰符 ignore忽略大小写
        // . 在正则中有什么特殊含义？匹配非回车换行的字符
        //我们不希望他有特殊含义，所以要转意
        test: /\.less$/,
        //匹配到后使用 loader
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        //正则匹配文件名 i是修饰符 ignore忽略大小写
        // . 在正则中有什么特殊含义？匹配非回车换行的字符
        //我们不希望他有特殊含义，所以要转意
        test: /\.(png|jpg|gif|jpeg)$/i,
        type: 'asset'
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/i,
        type: 'asset/resource', //表示不转成base64,直接复制到 dist
        //generator:生成器，帮我们自动整理输出到指定位置和指定的文件中
        generator: {
          //占位符：
          //[name]:原文件名，表示以前叫什么名字现在就原样输出
          //[ext]:原后缀名(包含.),原来的后缀名，包括：.,例如：.eot
          //[hash]:生成hash值，唯一的标识，避免重名覆盖
          filename: 'fonts/[name]-[hash:6][ext]'
        }
      },
      {
        test: /\.m?js$/, //匹配 .js结尾的文件
        //exclude:排除  include:包含
        //不降级 node_modules 和 bower_components 目录下的所有文件
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            //加一些额外的配置(语法预设：提前准备好的语法包)
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
}
